<template>
  <div class="Area-content">
    <router-link to="/">
      <div class="Label">返回疫情地图</div>
    </router-link>
    <div class="beijin">
      <img
        src="../../assets/images/4816335114107822643-22.png"
        width="100%"
        alt=""
      />
    </div>
    <div class="content2">
      <div class="title">
        <span>全国风险地区汇总</span>
      </div>
      <div class="title2">
        <img src="../../assets/images/高风险地区.png" alt="" />
        <span>高风险地区{{ high_count }}个</span>
      </div>
      <ul class="gfx" v-for="(item, key) in high_list" :key="key">
        <li>{{ item.cityname }}</li>
        <li>{{ item.countyname }}</li>
        <li>
          <span v-for="(item, index) in item.communitys" :key="index">
            {{ item }}
          </span>
        </li>
      </ul>
      <div class="title2">
        <img src="../../assets/images/中风险地区.png" alt="" />
        <span>中风险地区{{ mid_count }}个</span>
      </div>
      <ul class="zfx" v-for="(item1, key1) in mid_list" :key="key1">
        <li>{{ item1.cityname }}</li>
        <li>{{ item1.countyname }}</li>
        <li>
          <span v-for="(item1, index1) in item1.communitys" :key="index1">
            {{ item1 }}
          </span>
        </li>
      </ul>
      <div class="title2">
        <img src="../../assets/images/低风险地区.png" alt="" />
        <span>低风险地区{{ low_count }}个</span>
      </div>
      <ul class="dfx" v-for="(item2, key2) in low_list" :key="key2">
        <li>{{ item2.cityname }}</li>
        <li>{{ item2.countyname }}</li>
        <li>
          <span v-for="(item2, index2) in item2.communitys" :key="index2">
            {{ item2 }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "../../api/index.js";
export default {
  data() {
    return {
      high_list: [], //高风险详细
      mid_list: [], //中风险详细
      low_list: [], //低风险详细
      high_count: "", //高风险汇总
      mid_count: "", //高风险汇总
      low_count: "", //高风险汇总
    };
  },
  created() {
    api.getTravelRisk().then((res) => {
      console.log(res.data.result);
      let high = res.data.result.high_list; //创建对象high
      let mid = res.data.result.middle_list;
      let low = res.data.result.low_list;
      this.high_count = res.data.result.high_count;
      this.mid_count = res.data.result.middle_count;
      this.low_count = res.data.result.low_count;
      let higharr = [];
      let midarr = [];
      let lowarr = [];
      high.forEach((item) => {
        //高风险
        let obj = {};
        obj.cityname = item.city; //省份名称
        obj.countyname = item.county; //区名称
        obj.communitys = item.communitys; //风险地区详细地址
        higharr.push(obj);
      });
      mid.forEach((item) => {
        //中风险
        let obj1 = {};
        obj1.cityname = item.city; //省份名称
        obj1.countyname = item.county; //区名称
        obj1.communitys = item.communitys; //风险地区详细地址
        midarr.push(obj1);
      });
      low.forEach((item) => {
        //低风险
        let obj2 = {};
        obj2.cityname = item.city; //省份名称
        obj2.countyname = item.county; //区名称
        obj2.communitys = item.communitys; //风险地区详细地址
        lowarr.push(obj2);
      });
      console.log("---", higharr);
      console.log("---2", midarr);
      console.log("---3", lowarr);
      this.high_list = higharr; //把higharr传给high_list
      this.mid_list = midarr; //把midarr传给mid_list
      this.low_list = lowarr; //把lowarr传给low_list
    });
  },
};
</script>

<style lang="less" scoped>
.Area-content {
  position: relative;
  .Label {
    top: 0.23rem;
    right: 0.3rem;
  }
  .content2 {
    margin-top: -100px;
    padding: 0.2rem;
    .title {
      span {
        padding-left: 10px;
        font-size: 16px;
      }
    }
    .title2 {
      margin-top: 20px;
      display: flex;
      height: 20px;
      img {
        width: 20px;
      }
      span {
        display: block;
        padding-left: 8px;
      }
    }
    .gfx {
      li:nth-child(1) {
        background-color: rgb(255, 0, 136);
      }
      li:nth-child(2) {
        background-color: rgb(255, 154, 208);
      }
      li:nth-child(3) {
        background-color: rgb(255, 233, 245);
      }
    }
    .zfx {
      li:nth-child(1) {
        background-color: rgb(255, 128, 0);
      }
      li:nth-child(2) {
        background-color: rgb(255, 205, 156);
      }
      li:nth-child(3) {
        background-color: rgb(255, 228, 202);
      }
    }
    .dfx {
      li:nth-child(1) {
        background-color: rgb(0, 255, 76);
      }
      li:nth-child(2) {
        background-color: rgb(136, 255, 172);
      }
      li:nth-child(3) {
        background-color: rgb(209, 255, 223);
      }
    }
    .gfx,
    .zfx,
    .dfx {
      display: flex;
      margin-top: 18px;
      border-radius: 15px;
      li:nth-child(1) {
        min-height: 180px;
        writing-mode: vertical-lr;
        border-radius: 15px 0 0 15px;
        border-right: 2px dashed #ffff;
        color: white;
        width: 50px;
      }
      li:nth-child(2) {
        position: relative;
        border-right: 2px dashed #ffff;
        width: 80px;
        flex-grow: 1;
      }
      li:nth-child(2)::before,
      li:nth-child(2)::after {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 10px;
        background-color: rgb(238, 239, 241);
      }
      li:nth-child(2)::before {
        top: 0px;
        left: -10px;
        border-radius: 0 0 20px 20px;
      }
      li:nth-child(2)::after {
        bottom: 0px;
        left: -10px;
        border-radius: 20px 20px 0 0;
      }
      li:nth-child(3) {
        border-radius: 0 15px 15px 0;
        padding: 0.2rem;
        box-shadow: 10px 0px 20px -10px #c6c6c6;
        text-align: justify;
        width: 250px;
        flex-grow: 2;
      }
      li:nth-child(1),
      li:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>